<template>
  <div class="certification-page">
    <el-card v-if="!certStatus.isCertified">
      <div slot="header">
        <span>宠物医生认证申请</span>
        <el-steps :active="certStatus.step" simple style="float: right; width: 300px;">
          <el-step title="填写信息"></el-step>
          <el-step title="等待审核"></el-step>
          <el-step title="完成认证"></el-step>
        </el-steps>
      </div>

      <el-alert
          title="请确保提交真实有效的资质证明"
          type="warning"
          show-icon
          class="mb-20">
      </el-alert>

      <el-form
          :model="certForm"
          :rules="rules"
          ref="certForm"
          label-width="120px"
          label-position="top">
        <el-form-item label="真实姓名" prop="realname">
          <el-input v-model="certForm.realname" placeholder="请输入真实姓名"></el-input>
        </el-form-item>

        <el-form-item label="执业资格证书" prop="certFiles">
          <el-upload
              action="https://your-upload-api.com"
              :file-list="certForm.certFiles"
              :limit="3"
              accept=".jpg,.png,.pdf"
              :on-exceed="handleExceed"
              :before-upload="beforeUpload">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              支持格式：JPG/PNG/PDF，单个文件不超过5MB
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item label="工作经历证明" prop="experience">
          <el-input
              type="textarea"
              :rows="4"
              v-model="certForm.experience"
              placeholder="请详细描述您的从业经历和相关资质"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button
              type="primary"
              @click="submitCert"
              :loading="submitting">
            {{ submitting ? '提交中...' : '提交申请' }}
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card v-else>
      <div slot="header">
        <span>认证信息</span>
        <el-tag type="success" style="float: right;">
          <i class="el-icon-success"></i> 已认证
        </el-tag>
      </div>

      <el-descriptions :column="2" border>
        <el-descriptions-item label="认证身份">宠物医生</el-descriptions-item>
        <el-descriptions-item label="认证编号">VET202308001</el-descriptions-item>
        <el-descriptions-item label="认证时间">2023-08-01</el-descriptions-item>
        <el-descriptions-item label="认证机构">国际宠物医师协会</el-descriptions-item>
        <el-descriptions-item label="有效期至">2025-08-01</el-descriptions-item>
      </el-descriptions>

      <div class="cert-files">
        <h4>资质文件：</h4>
        <div v-for="(file, index) in certFiles" :key="index" class="file-item">
          <i class="el-icon-document"></i>
          {{ file.name }}
          <el-button type="text" @click="previewFile(file)">预览</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      certStatus: {
        isCertified: false,
        step: 1
      },
      certForm: {
        realname: '',
        certFiles: [],
        experience: ''
      },
      rules: {
        realname: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' }
        ],
        certFiles: [
          { required: true, message: '请上传资格证书', trigger: 'change' }
        ],
        experience: [
          { required: true, message: '请输入工作经历', trigger: 'blur' },
          { min: 50, message: '至少输入50字说明', trigger: 'blur' }
        ]
      },
      submitting: false,
      certFiles: [
        { name: '执业证书.pdf', url: '/certificates/1.pdf' },
        { name: '学历证明.jpg', url: '/certificates/2.jpg' }
      ]
    }
  },
  methods: {
    handleExceed() {
      this.$message.warning('最多上传3个文件')
    },
    beforeUpload(file) {
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isLt5M) {
        this.$message.error('文件大小不能超过5MB')
      }
      return isLt5M
    },
    submitCert() {
      this.$refs.certForm.validate(valid => {
        if (valid) {
          this.submitting = true
          // 模拟提交
          setTimeout(() => {
            this.certStatus.isCertified = true
            this.submitting = false
            this.$message.success('认证申请已提交，审核通常需要3-5个工作日')
          }, 1500)
        }
      })
    },
    previewFile(file) {
      window.open(file.url, '_blank')
    }
  }
}
</script>

<style scoped>
.certification-page {
  min-height: 500px;
}

.mb-20 {
  margin-bottom: 20px;
}

.cert-files {
  margin-top: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 4px;
}

.file-item {
  padding: 8px 0;
  border-bottom: 1px solid #ebeef5;
}

.file-item:last-child {
  border-bottom: none;
}
</style>